import React, { useEffect, useState, memo, useMemo } from "react"
import { NavLink, useLocation, useNavigate } from "react-router-dom"
import PCWEB from './pc'
import MOBILEWEB from './mobile'

export default () => {

    const navigate = useNavigate()

    // # data

    const [load, setLoad] = useState(0)
    const [route, setRoute] = useState(useLocation())
    const [query, setQuery] = useState(() => {
        var temp = route.search && route.search.split('?')[1].split('&') || []
        var tempobj = {}
        for (var i = 0; i < temp.length; i++) {
            tempobj[temp[i].split('=')[0]] = temp[i].split('=')[1]
        }
        return tempobj
    })
    const [viewver, setViewver] = useState('')

    // # methods

    const togetweb = () => {
        if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 800) {
            setViewver(() => 'mobile')
        } else {
            setViewver(() => 'pc')
        }
    }

    // # mounted

    const mounted = () => {
        if (load == 0) {
            setLoad(() => 1)
            //
            if (JSON.stringify(query) == '{}') {
                navigate('/other_page/test', { replace: true })
            } else {
                togetweb()
            }
        }
    }

    // # update

    const updates = () => {

    }

    // # destroyed

    const destroyeds = () => {
        if (React.updateobj.updates == 1) {
            setTimeout(() => {
                React.updateobj.updates = 0
            })
        } else {
            //这里是页面销毁的逻辑
        }
    }

    useEffect(() => {

        // # mounted

        mounted()

        // # update

        updates()

        // # destroyed

        return destroyeds

    })

    return (
        /*
        
        pc右边部分：[ 用户信息，视频信息，选集信息 ], [  弹幕信息  ] 
        mobile下面部分：[ 用户信息，视频信息，选集信息 ], [  弹幕信息  ]      
        
        */
        <div template='1'>
            {viewver == 'pc' ? (<PCWEB query={query}></PCWEB>) : viewver == 'mobile' ? (<MOBILEWEB query={query}></MOBILEWEB>) : ''}
        </div>
    )
}